這一天要講的是SASS「變數功能」，

首先模擬一些寫純CSS容易會遇到的情境

1.一個網站內有四組文字連結顏色樣式，總CSS程式碼有5000行，有文字連結顏色的設定共98行。當客戶想要改某一個文字顏色樣式時，就必須花時間逐行去修改。
2.要修改全域設定的網頁樣式時，時常必須用滾輪或肉眼從數百行中找出你要改的程式碼，像字型樣式、網站總體寬度等等。
這一天要講的是SASS「變數功能」，

首先模擬一些寫純CSS容易會遇到的情境

1.一個網站內有四組文字連結顏色樣式，總CSS程式碼有5000行，有文字連結顏色的設定共98行。當客戶想要改某一個文字顏色樣式時，就必須花時間逐行去修改。
2.要修改全域設定的網頁樣式時，時常必須用滾輪或肉眼從數百行中找出你要改的程式碼，像字型樣式、網站總體寬度等等。

所以今天主要則是教各位該如何使用Sass變數來解決這樣的問題，
首先我們先來看一段CSS碼，

.header a{
  color: #000;
}
.menu a{
  color: blue
}
.footer a{
  color: #000;
}
.nav a{
  color: blue
}

在建置網頁時，美術設計師都會設計數組文字連結顏色，
像上面就是在各個div裡面的設定文字顏色都不一樣，
所以當如果我要修改的時候就必須逐行去瀏覽並修正，
雖然可以透過一些工具全選並替換字串，
但也容易會漏掉一些少設定的code，

但如果是Sass的話就很方便就可以設定完成，
程式碼如下：

$link-color-1: #000
$link-color-2: blue
.header a
  color: $link-color-1
.menu a
  color: $link-color-2
.footer a
  color: $link-color-1
.nav a
  color: $link-color-2

首先先在程式碼最上面打個『$』字號，後面則是自己命名的變數，
像因為我有兩個連結樣式，所以我就命名成link-color-數量，
所以在當我打Sass時，如果有用到連結樣式，我就可以引入變數來取代。
如下影片(建議以720P+全螢幕瀏覽)：

全選的部分我是全選住範圍後按「Ctrl+D」，sublime便會自動幫我全選起其他地方的相同名稱。

--

除了支援色碼外還支援「字串」、「數字」等等，
雙引號的字串也可用 #{ }取出來，尤其是在樣式class名稱替代上。
如下影片：

所以從上述的變數介紹就可得知，
有很多全域的設定你都可透過變數來調整，
就不用再一直狂滾滾輪來找程式碼了，

像以我常用的全域設定就有下述幾種
$text-color:pink→預設文字顏色
$link-color:#000→文字連結樣式，多則就再加紹數字
$link-color-hover:#fff→滑鼠拖曳過後的樣式顏色
$font-size:13px→全域字型大小，如一網站有多種就下多種字型
$line-height:1.8→全域行距
$container-width:960px→ 網站整體寬度
$font-style："Helvetica Nueue", Arial, Sans Serif; →全域字型

Sass變數的好處相信大家已經可以看得出端倪了，
在以往我們都必須倚靠滾輪或用眼睛搜尋對應的程式碼來修改，
但透過Sass變數，我們只要看前2~30行的變數設定便可輕鬆地改全域網站的CSS程式碼，

相對來說在開發、維護、調整上都相當的便利嘍。